<template>
  <div style="height: calc(100% - 50px)">
    <el-scrollbar>
      <div class="table-cent">
        <img
          v-if="defectInfo.defectStatus < 4"
          class="table-centZT"
          src="@/assets/images/phm/Untreated.png"
          alt>
        <p class="table-centTitle">基础信息</p>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">工区:</p>
            <p
              v-if="defectInfo.deptAttr != null"
              class="table-centP2">{{ defectInfo.deptAttr.deptName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">线路:</p>
            <p
              v-if="defectInfo.lineAttr != null"
              class="table-centP2">{{ defectInfo.lineAttr.lineName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">站场区间:</p>
            <p
              v-if="defectInfo.siteAttr != null"
              class="table-centP2">{{ defectInfo.siteAttr.siteName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">行别:</p>
            <p
              v-if="defectInfo.directionAttr != null"
              class="table-centP2">{{ defectInfo.directionAttr.directionName }}</p>
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">股道:</p>
            <p
              v-if="defectInfo.trackAttr != null"
              class="table-centP2">{{ defectInfo.trackAttr.trackName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">隧道:</p>
            <p
              v-if="defectInfo.tunnelAttr != null"
              class="table-centP2">{{ defectInfo.tunnelAttr.tunnelName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">支柱:</p>
            <p
              v-if="defectInfo.pillarAttr != null"
              class="table-centP2">{{ defectInfo.pillarAttr.pillarNum }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">锚段:</p>
            <p
              v-if="defectInfo.anchorAttr != null"
              class="table-centP2">{{ defectInfo.anchorAttr.anchorNum }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">设备:</p>
            <p
              v-if="defectInfo.deviceAttr != null"
              class="table-centP2">{{ defectInfo.deviceAttr.deviceName }}</p>
          </div>
        </div>
        <p class="table-centTitle">缺陷信息</p>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">设备分类:</p>
            <p
              v-if="defectInfo.devClassAttr != null"
              class="table-centP2">{{ defectInfo.devClassAttr.devClassName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">缺陷公里标:</p>
            <p class="table-centP2">{{ formatRoad(defectInfo.roadMark) }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">设备状态类型:</p>
            <p
              class="table-centP2">{{ defectInfo.statusTypeAttr && defectInfo.statusTypeAttr.statusName }}</p>
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">用户缺陷分类:</p>
            <p
              v-if="defectInfo.userDefectTypeAttr != null"
              class="table-centP2">{{ defectInfo.userDefectTypeAttr.userDefectTypeName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">缺陷成因:</p>
            <p
              v-if="defectInfo.reasonAttr != null"
              class="table-centP2">{{ defectInfo.reasonAttr.reasonName }}</p>
          </div>
          <div class="table-centTd">
            <!--<p class="table-centP1">标准缺陷分类:</p>
            <p v-if="defectInfo.defectType != null" class="table-centP2">{{ defectInfo.defectType.defectTypeName }}</p>-->
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">缺陷等级:</p>
            <p
              v-if="defectInfo.gradeAttr != null"
              class="table-centP2">{{ defectInfo.gradeAttr.userGradeName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">缺陷值:</p>
            <p class="table-centP2">{{ defectInfo.defectValue }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">整改期限:</p>
            <p class="table-centP2">{{ defectInfo.rectifDt }}</p>
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">整改内容:</p>
            <p class="table-centP2">{{ defectInfo.rectifContent }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">缺陷描述:</p>
            <p class="table-centP2">{{ defectInfo.desc }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <div class="table-centP2 table-centimg">
              <div class="table-centimgqh">
                <p :class="{'table-centdat': true}" v-html="pictureTypeCollection[0].split('').join('<br/>')" />
              </div>
              <div class="table-centtu">
                <div class="table-centtu1">
                  <viewer :images="getFilePathListCategory[0]">
                    <div
                      v-for="(pic, index) in getFilePathListCategory[0]"
                      :key="index"
                      class="img-box"
                      :data-type="pic.type">
                      <img :src="getUrl(pic.url)" alt>
                    </div>
                  </viewer>
                </div>
              </div>
            </div>
          </div>
        </div>
        <p class="table-centTitle">缺陷来源</p>
        <div class="table-centTr">
          <div class="table-centTd">
            <!--gatherTypeAttr.typeClass 判断：1、检修 2、巡视 3、检测，4、检验，5、其它-->
            <p class="table-centP1">数据采集方式:</p>
            <p
              v-if="defectInfo.gatherTypeAttr != null"
              class="table-centP2">
              {{ ['', '检修', '巡视', '检测', '检验', '其它'][defectInfo.gatherTypeAttr.typeClass || 0] }}
            </p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">发现人:</p>
            <p class="table-centP2">{{ defectInfo.finder }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">检测装置类型:</p>
            <p
              v-if="defectInfo.gatherTypeAttr != null"
              class="table-centP2">
              {{ defectInfo.gatherTypeAttr.gatherTypeName }}
            </p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">发现日期:</p>
            <p class="table-centP2">{{ defectInfo.findDt }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <p class="table-centTitle">复测信息</p>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">复核人:</p>
            <p class="table-centP2">{{ defectInfo.checker }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">复核日期:</p>
            <p class="table-centP2">{{ defectInfo.checkDt }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">是否需要现场处理:</p>
            <p v-if="defectInfo.needSceneHandle == 0" class="table-centP2">不需要</p>
            <p v-if="defectInfo.needSceneHandle == 1" class="table-centP2">需要</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">复测值:</p>
            <p class="table-centP2">{{ defectInfo.checkValue }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">复核说明:</p>
            <p class="table-centP2">{{ defectInfo.checkDesc }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <div class="table-centP2 table-centimg">
              <div class="table-centimgqh">
                <p :class="{'table-centdat': true}" v-html="pictureTypeCollection[1].split('').join('<br/>')" />
              </div>
              <div class="table-centtu">
                <div class="table-centtu1">
                  <viewer :images="getFilePathListCategory[1]">
                    <div
                      v-for="(pic, index) in getFilePathListCategory[1]"
                      :key="index"
                      class="img-box"
                      :data-type="pic.type">
                      <img :src="getUrl(pic.url)" alt>
                    </div>
                  </viewer>
                </div>
              </div>
            </div>
          </div>
        </div>
        <p class="table-centTitle">缺陷处理</p>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">缺陷状态:</p>
            <p class="table-centP2">{{ defectInfo.defectStatusName }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">处理人:</p>
            <p class="table-centP2">{{ defectInfo.solvePerson }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">处理日期:</p>
            <p class="table-centP2">{{ defectInfo.solveDt }}</p>
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">整改负责人:</p>
            <p class="table-centP2">{{ defectInfo.rectifPerson }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">修后值:</p>
            <p class="table-centP2">{{ defectInfo.repairValue }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">销号人:</p>
            <p class="table-centP2">{{ defectInfo.eliminatePerson }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1">销号时间:</p>
            <p class="table-centP2">{{ defectInfo.eliminateDt }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">处理措施:</p>
            <p class="table-centP2">{{ defectInfo.solveMethod }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <p class="table-centP1">备注:</p>
            <p class="table-centP2">{{ defectInfo.memo }}</p>
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
          <div class="table-centTd">
            <p class="table-centP1" />
            <p class="table-centP2" />
          </div>
        </div>
        <div class="table-centTr">
          <div class="table-centTd">
            <div class="table-centP2 table-centimg">
              <div class="table-centimgqh">
                <p :class="{'table-centdat': true}" v-html="pictureTypeCollection[2].split('').join('<br/>')" />
              </div>
              <div class="table-centtu">
                <div class="table-centtu1">
                  <viewer :images="getFilePathListCategory[2]">
                    <div
                      v-for="(pic, index) in getFilePathListCategory[2]"
                      :key="index"
                      class="img-box"
                      :data-type="pic.type">
                      <img :src="getUrl(pic.url)" alt>
                    </div>
                  </viewer>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
// 缺陷详情
import { findDefectInfoById } from '@/api/cms/detect-data/information'
import { getToken } from '@/utils/auth'
export default {
  name: 'DeviceBoard',
  props: {
    detectId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defectInfo: {
        deptAttr: {
          deptName: ''
        },
        lineAttr: {
          lineName: ''
        },
        siteAttr: {
          siteName: ''
        },
        directionAttr: {
          directionName: ''
        },
        trackAttr: {
          trackName: ''
        },
        tunnelAttr: {
          tunnelName: ''
        },
        pillarAttr: {
          pillarCode: ''
        },
        anchorAttr: {
          anchorCode: ''
        },
        deviceAttr: {
          deviceName: ''
        },
        devClassAttr: {
          devClassName: ''
        },
        roadMark: '',
        defectTypeId: '',
        userDefectTypeAttr: {
          userDefectTypeName: ''
        },
        reasonAttr: {
          reasonName: ''
        },
        gradeAttr: {
          gradeName: ''
        },
        defectValue: '',
        rectifDt: '',
        rectifContent: '',
        desc: '',
        picList: [],
        gatherTypeAttr: {
          gatherTypeName: ''
        },
        finder: '',
        findDt: '',
        checker: '',
        checkDt: '',
        needSceneHandle: '',
        checkValue: '',
        checkDesc: '',
        defectStatus: '',
        solvePerson: '',
        solveDt: '',
        rectifPerson: '',
        repairValue: '',
        eliminatePerson: '',
        eliminateDt: ''
      },
      filePathList: [],
      sourceType: 'img', // 缺陷图片|缺陷视频
      pictureTypeCollection: ['缺陷图片', '复测图片', '销号图片']
    }
  },
  computed: {
    getFilePathListCategory: function() {
      const catogory = []
      const result = []
      this.filePathList.forEach(pic => {
        const index = catogory.indexOf(pic.type)
        if (index >= 0) {
          result[index].push(pic)
        } else {
          catogory.push(pic.type)
          result.push([pic])
        }
      })
      return result
    }
  },
  mounted() {
    this.findDefectInfoById()
  },
  methods: {
    findDefectInfoById() {
      const param = {}
      const detectId = this.detectId || this.$route.query.detectId
      param.detectId = detectId
      findDefectInfoById(param).then(response => {
        console.log('一杆一档缺陷详情', response)
        this.defectInfo = response.data.defectInfo
        if (this.defectInfo.picList) {
          this.defectInfo.picList.forEach(item => {
            this.filePathList.push({
              url: item.filePath,
              type: item.defectStage
            })
          })
        }
      })
    },
    getUrl(url) {
      return (
        process.env.VUE_APP_BASE_API +
        '/dfile/file/download?fileUrl=' +
        url +
        '&access_token=' +
        getToken()
      )
    }
  }
}
</script>

<style scoped lang="scss">
.el-scrollbar {
  height: 100%;
}
.table-cent {
  border: 1px solid #409eff;
  margin: 8px 10px;
  color: black;
  position: relative;
  z-index: 1;
  .table-centZT {
    width: 150px;
    position: absolute;
    top: 50px;
    right: 20%;
  }
  .table-centTitle {
    font-size: 16px;
    padding: 8px 10px;
    color: white;
    background: #409eff;
  }
  .table-centTr {
    display: flex;
    .table-centTd:nth-child(1) {
      border-left: 0px;
    }
    .table-centTd {
      flex: 1;
      border-bottom: 1px solid #409eff;
      border-left: 1px solid #409eff;
      > p {
        min-height: 100%;
        padding: 8px 10px;
        font-size: 14px;
        overflow: hidden;
      }
      .table-centP1 {
        float: left;
        color: black;
      }
      .table-centDuan {
        width: 100px;
      }
      .table-centP2 {
        float: left;
      }
      .table-centimg {
        padding: 8px 10px;
        width: 100%;
        .table-centimgqh {
          // border: 1px solid #199ed6;
          // height: 200px;
          height: 176px;//528px;
          width: 35px;
          float: left;
          > p {
            color: #fff;
            line-height: 50%;
            text-align: center;
            word-wrap: break-word;
            // height: 50%;
            height: 33%;
            // margin: calc(6%) 0;
            line-height: normal;
            padding: 32px 0px;
            line-height: 19px;
            cursor: pointer;
          }
          // .table-centdat {
          //   background: #199ed7;
          // }
        }
        .table-centtu {
          float: left;
          width: calc(100% - 40px);
          overflow-x: auto;
          .table-centtu1 {
            white-space: nowrap;
            width: 100%;
            overflow-x: auto;
            .img-box {
              display: inline-block;
              border: 2px solid;
              overflow: hidden;
              position: relative;
              margin-left: 10px;
              width: 180px;
              height: 172px;
              &:after {
                content: "";
                width: 10px;
                height: 10px;
                font-size: 12px;
                text-align: center;
                color: #fff;
                position: absolute;
                right: -5px;
                top: -5px;
                transform: rotate(45deg);
              }
              &[data-type="1"] {
                border-color: #ffaa2d;
                &:after {
                  background: #ffaa2d;
                }
              }
              &[data-type="2"] {
                border-color: #4ab7bd;
                &:after {
                  background: #4ab7bd;
                }
              }
              &[data-type="3"] {
                border-color: #007c19;
                &:after {
                  background: #007c19;
                }
              }
              img {
                width: 176px;
                height: 168px;
              }
              .p1 {
                line-height: 23px;
                padding: 0 10px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
